---
title: LED
description: Small on/off indicator with optional blinking or change-driven flash.
component: LED
---

<LiveComponent language="tsx">
{`
  import { LED } from "@pipecat-ai/voice-ui-kit";

  <LED />
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    on: {
      description: "Whether the LED is on. Ignored while a blink/flash is active.",
      type: "boolean",
      required: false,
      default: "false",
    },
    blinking: {
      description: "Enable continuous binary blinking (hard toggle, no fades).",
      type: "boolean",
      required: false,
      default: "false",
    },
    blinkIntervalMs: {
      description: "Interval in ms for blinking. Minimum 50ms.",
      type: "number",
      required: false,
      default: "100",
    },
    watch: {
      description: "Value to watch. When it changes, the LED blinks for a short duration then settles to off.",
      type: "unknown",
      required: false,
      default: "undefined",
    },
    watchBlinkDurationMs: {
      description: "Duration in ms to blink when 'watch' changes before settling off.",
      type: "number",
      required: false,
      default: "500",
    },
    classNames: {
      description: "Custom classes for on/off layers.",
      type: "{ on?: string; off?: string }",
      required: false,
      default: "{}",
    },
    className: {
      description: "Additional CSS classes (e.g. size/shape).",
      type: "string",
      required: false,
      default: "undefined",
    },
  }}
/>

---

## Usage

### Basic States

<LiveComponent language="tsx">
{`
    import { LED } from "@pipecat-ai/voice-ui-kit";
    
    <div className="flex flex-row gap-4 w-full justify-center items-center">
        <LED />
        <LED on />
        <LED blinking />
        <LED on blinking />
    </div>
`}
</LiveComponent>

### Styled with classes

<LiveComponent language="tsx">
{`
    import { LED } from "@pipecat-ai/voice-ui-kit";
    
    <div className="flex flex-row gap-4 w-full justify-center items-center">
        <LED className="rounded-full" />
        <LED className="rounded-full" on />
        <LED className="rounded-full" blinking />
        <LED className="rounded-full" on blinking />
    </div>
`}
</LiveComponent>

### Custom Colors

<LiveComponent language="tsx">
{`
    import { LED } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-6 w-full justify-center items-center">
        <LED classNames={{ on: "bg-emerald-500", off: "bg-neutral-500" }} />
        <LED classNames={{ on: "bg-red-500", off: "bg-blue-500" }} />
    </div>
`}
</LiveComponent>

### Sizing

Use Tailwind's `size-*` utilities via `className`.

<LiveComponent language="tsx">
{`
    import { LED } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-6 w-full justify-center items-center">
        <LED className="size-3" />
        <LED />
        <LED className="size-6" />
        <LED className="size-10" />
    </div>
`}
</LiveComponent>

### Blink Interval

<LiveComponent language="tsx">
{`
    import { LED } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-8 w-full justify-center items-center">
        <div className="flex flex-col items-center gap-2">
            <LED blinking blinkIntervalMs={100} />
            <span className="text-xs opacity-70">100ms</span>
        </div>
        <div className="flex flex-col items-center gap-2">
            <LED blinking blinkIntervalMs={500} />
            <span className="text-xs opacity-70">500ms</span>
        </div>
    </div>
`}
</LiveComponent>

### Watch-driven Flash

When `watch` changes, the LED blinks for `watchBlinkDurationMs` then returns to off.

<LiveComponent language="tsx" noInline >
{`
    import { LED, Button } from "@pipecat-ai/voice-ui-kit";

    function Demo() {
      const [count, setCount] = React.useState(0);
      return (
        <div className="flex flex-col gap-3 items-center">
          <div className="flex items-center gap-6">
            <LED watch={count} />
            <LED watch={count} watchBlinkDurationMs={100} />
            <LED watch={count} classNames={{ on: "bg-yellow-400", off: "bg-zinc-600" }} />
          </div>
          <div className="flex items-center gap-2">
            <Button onClick={() => setCount((c) => c + 1)}>Ping</Button>
            <Button variant="outline" onClick={() => { for (let i = 0; i < 5; i++) { setTimeout(() => setCount((c) => c + 1), i * 60); } }}>Burst (5x)</Button>
            <span className="text-sm opacity-70">count: {count}</span>
          </div>
        </div>
      );
    }

    render(<Demo />)
`}
</LiveComponent>


